<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Zhou Wenying
  Date: 2023/3/9
  Time: 21:18
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head>
    <title>商品列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" href="/static/css/style.css"/>
    <script type="text/javascript" src="/static/js/jquery-3.6.1.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
    <link href="/static/css/lbst.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<!--header-->




<!--header-->
<jsp:include page="/page/head2.jsp">
    <jsp:param name="flag" value="7"></jsp:param>
</jsp:include>

<!--banner-->

<%--轮播--%>
<br><br>
<div class="container">
    <div class="row clearfix">

        <div class="col-sm-12 matter-banner">
            <div class="slider">
                <div class="callbacks_container">
                    <ul class="rslides" id="slider">
                        <li>
                            <img src="/static/image/lb1.png" alt="">
                        </li>
                        <li>
                            <img src="/static/image/lb2.png" alt="">
                        </li>
                        <li>
                            <img src="/static/image/lb3.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

<%--<div class="container">
    <div class="row clearfix">
    <div id="myCarousel" class="col-sm-12 matter-banner ">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators text1">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/static/image/lb1.png" alt="First slide">
            <div class="carousel-caption"></div>
        </div>
        <div class="item">
            <img src="/static/image/lb2.png" alt="Second slide">
            <div class="carousel-caption"></div>
        </div>
        <div class="item">
            <img src="/static/image/lb3.png" alt="Third slide">
            <div class="carousel-caption"></div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
    </div>
</div>--%>

<!--//banner-->

<!--gallery-->
<div class="gallery">
    <div class="container">
        <div class="alert alert-danger">热度推荐</div>
        <div class="gallery-grids">
            <c:forEach items="${requestScope.hotbooks}" var="hotbook">
                <div class="col-md-4 gallery-grid glry-two">
                    <a href="/showBook?bookId=${hotbook.bookId}">
                        <img src="/getImg?img=${hotbook.bookImg}" class="img-responsive" alt="${hotbook.bookName}" width="350" height="350">
                    </a>
                    <div class="gallery-info galrr-info-two">
                        <p>
                            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                            <a href="/showBook?bookId=${hotbook.bookId}">查看详情</a>
                        </p>
                        <a class="shop" href="javascript:;" onclick="buy(${hotbook.bookId})">立刻购买</a>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="galy-info">
                        <div style="text-align: center;"><p>${hotbook.bookName}</p></div>
                        <div class="galry">
                            <div class="prices" style="text-align: center;">
                                <span style="color: black;font-size: 25px">￥${hotbook.bookMoney}</span>
                                &nbsp;&nbsp;&nbsp;
                                <span style="color: #666;font-size: 25px"><del>￥${hotbook.bookOldMoney}</del></span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>

            </c:forEach>

        </div>
        <div class="clearfix"></div>
        <div class="alert alert-info">新品推荐</div>
        <div class="gallery-grids">
          <c:forEach items="${requestScope.newbooks}" var="newbooks">
            <div class="col-md-3 gallery-grid ">
                <a href="/showBook?bookId=${newbooks.bookId}">
                    <img src="/getImg?img=${newbooks.bookImg}" class="img-responsive" alt="${newbooks.bookName}">
                </a>
                <div class="gallery-info">
                    <p>
                        <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                        <a href="/showBook?bookId=${newbooks.bookId}">查看详情</a>
                    </p>
                    <a class="shop" href="javascript:;" onclick="buy(${newbooks.bookId})">立刻购买</a>
                    <div class="clearfix"> </div>
                </div>
                <div class="galy-info">
                    <div style="text-align: center;"><p>${newbooks.bookName}</p></div>
                    <div class="galry">
                        <div class="prices" style="text-align: center;">
                            <span style="color: black;font-size: 25px">￥${newbooks.bookMoney}</span>
                            &nbsp;&nbsp;&nbsp;
                            <span style="color: #666;font-size: 25px"><del>￥${newbooks.bookOldMoney}</del></span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>

          </c:forEach>

        </div>
    </div>
</div>
<!--//gallery-->
<!--subscribe-->
<div class="subscribe"></div>
<!--//subscribe-->


<!--footer-->


<!--footer-->
<!--footer-->
<jsp:include page="/page/footer.jsp"></jsp:include>
<!--//footer-->
<!--//footer-->

<script src="/static/js/responsiveslides.min.js"></script>
<script>
    $(function () {
        $("#slider").responsiveSlides({
            auto: true,
            speed: 300,
            namespace: "callbacks",
            pager: true,
        });
    });
</script>

</body>
</html>
